{% extends 'df_user/base_user.html' %}

{% load static %}

{% block title %}
    用户信息
{% endblock %}

{% block right_content %}


    <div class="right_content clearfix">
        <div class="info_con clearfix">
            <h3 class="common_title2">{{ page_name }}</h3>

            <p>点击发送按钮发送验证码至{% if t == 'p' %}{{ user.uphone }}{% else %}{{ user.uemail }}{% endif %}.</p>
            <form action="" method="post">
                {% csrf_token %}
                <input type="text" name="code" maxlength="4" minlength="4" style="display: none;">
                <button id="send_btn">发送</button>
                <button type="submit" name="t" value="{{ t }}" style="display: none;">确定</button>
            </form>

        </div>
    </div>

    <script>


        function a() {
            // 获取所有li
            var $lis = $(this).parent().siblings(':gt(0)');
            // 初始化两个数组，存放修改后的键和值
            var ks = [];
            var vs = [];
            // 查找所有修改过来值，添加到上面的数组
            $lis.each(function () {
                var $input = $(this).find('input');
                var old = $input.data('old');
                var ne = $input.val();
                if (ne && ne != old) {
                    ks.push($(this).data('name'));
                    vs.push(ne);
                }
            });
            // 创建空字典，存放要修改的数据
            var cdata = {};
            // 判断是否有修改
            if (ks.length > 0) {
                // 信息有修改，遍历修改项，并组成字典
                for (var i = 0; i < ks.length; i++) {
                    cdata[ks[i]] = vs[i];
                }
                $.post({
                    url: "{% url 'edit_info' %}",
                    data: {'data': JSON.stringify(cdata)},  // 将字典转成json传给服务端
                    success: function (data) {
                        if (data.status == 200) {
                            // 修改成功！
                            $lis.each(function () {
                                var $this = $(this);
                                var $input = $this.find('input');
                                if ($this.data('name') in data.data) {
                                    $input.before('<b>' + data.data[$this.data('name')] + '</b>').remove();
                                } else {
                                    $input.before('<b>' + $input.data('old') + '</b>').remove();
                                }
                            });
                        } else {
                            alert("修改失败, 请稍后重试！")
                        }
                    }
                })
            } else {
                // 没有修改，还原回去
                $lis.each(function () {
                    var $input = $(this).find('input');
                    $input.before('<b>' + $input.data('old') + '</b>').remove();
                });

            }
            $(this).text('修改').unbind().click(b);

        }


        function b() {
            var $lis = $(this).parent().siblings(':gt(0)');
            $lis.each(function () {
                var $this = $(this);
                var $b = $this.find('b');
                var old = $b.text();
                $b.before('<input type="text" value="' + old + '" data-old="' + old + '">').remove();
            });
            $(this).text('完成');
            $(this).unbind();
            $(this).click(a)
        }


        $(function () {


            $('#edit_btn').click(b);

            $('#send_btn').click(function () {
                var $this = $(this);
                $.get({
                    url: "{% url 'send_captcha' %}",
                    data: {'t': "{{ t }}"},
                    success: function (data) {
                        console.log(data)
                        if (data.status == 200) {
                            var $form = $this.parents('form');
                            $form.data('tid', data.tid);
                            $form.find('input').css('display', 'inline-block');
                            $form.find(':submit').css('display', 'inline-block');
                            $this.attr('disabled', true);
                            var num = 60;
                            $this.text(num);

                            var timer = setInterval(function () {
                                num -= 1;
                                $this.text(num);
                                if (num <= 0) {
                                    $this.text('重发');
                                    $this.attr('disabled', false);
                                    clearInterval(timer);
                                }
                            }, 1000)
                        } else {
                            alert(data.msg)
                        }

                    }
                });

                return false
            })
        })

    </script>

{% endblock %}